<template>
<!-- 15224571863 -->
  <div class="login">
    <!-- 头部栏 -->
    <Header></Header>
    <!-- 中部 -->
    <div class="center">
      <img class="logo_left" src="..\assets\Images\login\logo_left.jpg" />
      <!-- 中部输入框 -->
      <div class="login_input">
        <div>
          <router-link to="/login" active-class="active" class="header_text">登录</router-link>
          <router-link to="/register" active-class="active" class="header_text">注册</router-link>
        </div>
        <!-- 动态面板之登录 -->
        <div class="logins">
          <el-form class="test" :model="login" ref="login" :rules="rules">
            <el-form-item prop="telephone">
              <el-input v-model="login.telephone" class="input_style1" clearable placeholder="请输入手机号" type="tel"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="login.password" class="input_style1" clearable placeholder="请输入登录密码">
              </el-input>
            </el-form-item>
            <el-form-item>
              <router-link to="/forget">
                <el-button :plain="true" type="primary" class="input_btn">忘记密码</el-button>
              </router-link>
              <el-button :plain="true" type="primary" class="input_btn" @click="Login()">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../common/header.vue'
export default {
  name: 'Login',
  components: {
    Header: Header
  },
  data () {
    // 电话号码校验
    var checkTel = (rule, value, callback) => {
      if (value && (!(/^[1][345789]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
        callback(new Error('手机号码不符合规范'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      userName: '',
      login: {
        telephone: '',
        password: ''
      },
      rules: {
        telephone: [
          { validator: checkTel, trigger: 'blur' },
          { required: true, message: '请输入电话号码', trigger: 'blur' }
        ],
        password: [
          { max: 12, min: 5, message: '长度为5到12位', trigger: 'blur' },
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 登录
    Login (login) {
      this.$refs.login.validate(valid => {
        if (valid) {
          let param = {
            telephone: this.login.telephone,
            password: this.login.password
          }
          this.$axios({
            url: 'user/login',
            method: 'post',
            data: param
          })
            .then(res => {
              if (res.data.code === 200) {
                sessionStorage.setItem('token', res.data.data.token)
                if (res.data.message === '管理员登录成功') {
                  this.$message.success(res.data.message)
                  this.$router.push(res.data.path)
                } else if (res.data.message === '用户登录成功') {
                  this.$message.success(res.data.message)
                  this.$router.push(res.data.path)
                }
                window.sessionStorage.setItem('userName', res.data.data.pogUser.username)
                this.userName = window.sessionStorage.getItem('userName')
                // console.log(this.userName);
              } else {
                this.$message.error(res.data.message)
                this.$router.push('/login')
              }
            })
            .catch(err => {
              console.log(err)
            })
        }
      })
    }
  }
}
</script>
<style scoped>

.active {
  border-bottom: 2px solid #4c61a0;
}

.test {
  margin-top: 60px;
}

/* 中部 */
.center {
  margin: 0 auto;
}

/* 中部左侧图片 */
.logo_left {
  float: left;
  width: 500px;
  height: 400px;
  margin-top: 13%;
  margin-left: 20%;
}

/* 中部整体输入框 */
.login_input {
  display: block;
  float: left;
  margin-top: 10%;
  margin-left: 12%;
  border: 1px solid #4c61a0;
  box-shadow: 15px 10px 10px -10px #4c61a0;
  height: 460px;
  width: 280px;
  padding: 0px 25px;
  border-radius: 22px;
}

/* 注册登录导航 */
.header_text {
  float: left;
  margin-top: 15px;
  margin-left: 60px;
  margin-right: 18px;
  padding: 0 0 10px 0;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

/* 输入框---登录 */
.input_style1 {
  width: 280px;
  height: 45px;
  margin-top: 50px;
}

/* 登录按钮 */
.input_btn {
  width: 100px;
  height: 35px;
  margin-top: 60px;
  margin-left: 28px;
  border-radius: 1em;
  color: white;
  border-color: transparent;
  background: #4c61a0;
}

/*提示文字颜色样式*/
input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #4c61a0;
}
</style>
